import React, {Component} from 'react';

import Layout from '&components/layout';

import { connect } from 'react-redux';

import { Table, Tag, Input, Button } from 'antd';

import {SearchOutlined} from '@ant-design/icons'

import Highlighter from 'react-highlight-words';

const data = [
  {
    key: '1',
    term: '暂无数据',
    courseName: '数学',
    teacherName: 'ymz',
    isFinished:true,
  },
  {
    key: '2',
    term: '暂无数据',
    courseName: '数学',
    teacherName: 'ymz',
    isFinished:false,
  },{
    key: '3',
    term: '暂无数据',
    courseName: 'ymz',
    teacherName: 'ymz',
    isFinished:true,
  },{
    key: '4',
    term: '暂无数据',
    courseName: '数学',
    teacherName: 'ymz',
    isFinished:true,
  },{
    key: '5',
    term: '暂无数据',
    courseName: 'zm',
    teacherName: 'ymz',
    isFinished:true,
  },{
    key: '6',
    term: '暂无数据',
    courseName: '数学',
    teacherName: 'zmy',
    isFinished:true,
  },
];

class Schedule extends Component {
  columns = [
  {
    title: '学期',
    dataIndex: 'term',
    key: 'term',
    ...this.getColumnSearchProps('term'),
  },
  {
    title: '课程名称',
    dataIndex: 'courseName',
    key: 'courseName',
    ...this.getColumnSearchProps('courseName'),
  },
  {
    title: '任课教师',
    dataIndex: 'teacherName',
    key: 'teacherName',
    ...this.getColumnSearchProps('teacherName'),
  },
  {
    title: '完成情况',
    key: 'isFinished',
    dataIndex: 'isFinished',
    render: isFinished => isFinished?<Tag color="#f50">未完成</Tag>:<Tag color="#87d068">完&emsp;成</Tag>,

  }
];
  getColumnSearchProps(dataIndex){
        return ({
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div style={{ padding: 8 }}>
                    <Input
                        ref={node => {
                            this.searchInput = node;
                        }}
                        placeholder={`请输入要查询的内容`}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
                        style={{ width: 188, marginBottom: 8, display: 'block' }}
                    />
                    <Button
                        type="primary"
                        onClick={() => this.handleSearch(selectedKeys, confirm)}
                        icon="search"
                        size="small"
                        style={{ width: 90, marginRight: 8 }}
                    >
                        查询
                    </Button>
                    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        重置当前项
                    </Button>
                </div>
            ),
            filterIcon: filtered => (
                // <Icon type="search" style={{ color: filtered ? '#1890ff' : "#87c38f" ,
                //     fontSize:'20px',
                // }} />
                <SearchOutlined />
                
            ),
            onFilter: (value, record) =>
                record[dataIndex]
                    .toString()
                    .toLowerCase()
                    .includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: visible => {
                if (visible) {
                    setTimeout(() => this.searchInput.select());
                }
            },
            render: text => (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[this.props.store.searchText]}
                    autoEscape
                    textToHighlight={text?text.toString():''}
                />
            ),
        })
    }
    handleSearch(selectedKeys, confirm){
        confirm();
        this.props.searchTextChange(selectedKeys[0]);
    }
    handleReset(clearFilters){
        clearFilters();
        this.props.searchTextChange('');
    }
	render(){
		return(
        <Table columns={this.columns} dataSource={data} />
		)
	}
}

const mapStateToProps = (state) => { return {store: state.schedule}}
const mapDispatchToProps = dispatch => ({
  searchTextChange:dispatch.schedule.searchTextChange
})

export default connect(mapStateToProps,mapDispatchToProps)(Schedule);